<form class="ui form text-cursor" {{action this.save on='submit' preventDefault=true}}>
  <h3 class="ui header">
    {{t 'Add Fee Settings for the event invoices'}}
  </h3>
  {{#if this.globalFees}}
    <h4 class="ui header">
      {{t 'Global Settings'}}
    </h4>
    
    <div class="ui five column very relaxed grid">
      <div class="ui field four wide column">
        <label>
          {{t 'Service Fee'}}
        </label>
        <div class="ui right labeled input">
          <Input
            @type="number"
            @name={{concat this.globalFees.currency "_service"}}
            @value={{this.globalFees.serviceFee}}
            @step={{0.1}}
            @min={{0}}
            required />
          <div class="ui basic label">
            %
          </div>
        </div>
      </div>

      <div class="ui field four wide column">
        <label>
          {{t 'Maximum Fee'}}
        </label>
        <div class="ui input">
          <Input
            @type="number"
            @name={{concat this.globalFees.currency "_maximum"}}
            @value={{this.globalFees.maximumFee}}
            @step={{0.1}}
            @min={{0}}
            required />
        </div>
      </div>
    </div>
  {{/if}}

  {{#if this.ticketFees}}
    <h4 class="ui header">
      {{t 'Country-Wise Settings'}}
    </h4>
  {{/if}}

  {{#each this.ticketFees as |ticketFee|}}
    <div class="ui five column very relaxed grid">
      <div class="ui field three wide column">
        <CountryDropdown
          @required={{true}}
          @paymentCountries={{true}}
          @placeholder={{t 'Select country'}}
          @val={{ticketFee.country}} />
      </div>
      <div class="ui field four wide column">
        <label class="required">{{t 'Select currency'}}</label>
        <UiDropdown
          @class="search selection"
          @selected={{ticketFee.currency}}
          @forceSelection={{false}}
          @fullTextSearch={{true}}>
          <Input
            @type="hidden"
            @value={{ticketFee.currency}} />
          <i class="dropdown icon"></i>
          <div class="default text">{{t 'Select currency'}}</div>
          <div class="menu">
            {{#each this.paymentCurrencies as |paymentCurrency|}}
              <div class="item" data-value="{{paymentCurrency.code}}">
                {{paymentCurrency.code}} -
                {{t-var paymentCurrency.name}}
                ({{paymentCurrency.symbol}})
              </div>
            {{/each}}
          </div>
        </UiDropdown>
      </div>

      <div class="ui field four wide column">
        <label>
          {{t 'Service Fee'}}
        </label>
        <div class="ui right labeled input">
          <Input
            @type="number"
            @name={{concat ticketFee.currency "_service"}}
            @value={{ticketFee.serviceFee}}
            @step={{0.1}}
            @min={{0}} />
          <div class="ui basic label">
            %
          </div>
        </div>
      </div>

      <div class="ui field four wide column">
        <label>
          {{t 'Maximum Fee'}}
        </label>
        <div class="ui right labeled input">
          <div class="ui label">
            {{#if ticketFee.currency}}
              {{currency-symbol ticketFee.currency}}
            {{/if}}
          </div>
          <Input
            @type="number"
            @name={{concat ticketFee.currency "_maximum"}}
            @value={{ticketFee.maximumFee}}
            @step={{0.1}}
            @min={{0}} />
          <div class="ui basic label">
            <UiPopup
              @content={{t "If you keep the maximum fee as 0, it  would become unlimited. Kindly set the maximum fee to some value."}}>
              <i class="info circle fitted icon"></i>
            </UiPopup>
          </div>
        </div>
      </div>

      <div class="field one wide column centered row" style="margin-top: 24px;">
        <UiPopup
          @content={{t "Delete"}}
          @class="ui icon button"
          @click={{action (confirm (t "Are you sure you would like to remove this event fee?") (action "deleteTicket" ticketFee))}}>
          <i class="trash icon"></i>
        </UiPopup>
      </div>

      <div class="ui horizontal divider"></div>
    </div>
  {{/each}}

  <button type="button" class="ui teal button" {{action 'addNewTicket'}}>
    {{t 'Add New'}}
  </button>

  <button class="ui teal button {{unless this.model 'disabled'}}" type="submit">
    {{t 'Save'}}
  </button>
</form>
